import React, { useEffect, useRef, useState } from "react";
import '../../css/lmy/Lmy.css'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom";

import Kjmm from '../../css/lmy/icon/kjmm.svg?react';
import Xx from '../../css/lmy/icon/xx.svg?react';
import Yx from '../../css/lmy/icon/yx.svg?react';
import instance from "../../request/request";

const Lchangemi = ()=>{
    const navigate = useNavigate()
    const [flag,setFlag] = React.useState(true)
    const [num,setNum] = React.useState(60)
    const inputRefs = useRef([]);
    const [message, setMessage] = useState(false);
    const reg = /^1[3-9]\d{9}$/;
    const [data,setData] = useState({})
    var [verificationCode, setVerificationCode] = useState('');
    const [arr,setArr] = useState([])
    const sendVerificationCode = async () => {
        setFlag(false)
        setMessage(true)
        try {
            instance.post('http://localhost:3000/send-verification-code', {phoneNumber:data.phone});
        } catch (error) {
            throw new Error(error)
        }
        
    };
    const verifyCode = async () => {
        try {
          instance.post('http://localhost:3000/verify-code', {
            phoneNumber:data.phone,
            code: verificationCode
          }).then(res=>{
            if(res.data.success){
                navigate('/resetmi')
            }
          });
        } catch (error) {
            throw new Error(error)
        }
      };
    function getData(){
        instance.get('/lLogin',{
            params:{
                lemail:localStorage.getItem('lemail'),
                lphone:localStorage.getItem('lphone')
            }
        }).then(res=>{
            // console.log(res.data)
            if(res.data.code===200){
                setData(res.data.data)
            }
        })
    }
    useEffect(()=>{
        getData()
    },[])
    useEffect(()=>{
        
        let timer = setInterval(()=>{
            setNum(num=>num-1)
        },1000)
        if(num===0){
            clearInterval(timer)
            setNum(60)
            setFlag(true)
        }
        return ()=>{
            clearInterval(timer)
        }
    },[message])

    const handleInputChange = (e, index) => {
       
        setArr(pre=>[...pre,e.target.value])
        if (e.target.value.length === 1 && index < inputRefs.current.length - 1) {
            inputRefs.current[index + 1].focus();
        }
        
    };
    useEffect(()=>{
        if(arr.length===6){
            setVerificationCode(Number(arr.join('')))
        }
    },[arr])
    return(
        <div>
            <div className="lchangemiBox">
                <h3 className="lourselfHead"><LeftOutline onClick={()=>{
                    navigate('/lserity')
                }} />
                &nbsp;
                密码找回</h3>
            </div>
            {flag?(
                <div>
                    <div>
                <Kjmm className='lsvg'></Kjmm>
                <p className="lsvgp">选择要用于重置您的密码的手机号或Email</p>
            </div>
            <div className="lXxBox">
                <div style={{flex:1}}>
                    <Xx className='lXx'></Xx>
                </div>
                <div className="lXxP">
                    <p>手机号找回</p>
                    <span><b>{data.phone}</b></span>
                </div>
            </div>
            <div className="lXxBox">
                <div style={{flex:1}}>
                    <Yx className='lXx'></Yx>
                </div>
                <div className="lXxP">
                    <p>Email找回</p>
                    <span><b>{data.email}</b></span>
                </div>
            </div>
            <div className="lxyb">
                <button onClick={sendVerificationCode}>下一步</button>
            </div>
                </div>
            ):(
                <div>
                    <div className="lxxyzm">
                        <p style={{textAlign:'center'}}>验证码已发送至{data.phone}</p>
                    </div>
                    <div>
                        <ul className="lul">
                            {[...Array(6)].map((_, index) => (
                                <li key={index}>
                                    <input
                                        type="text"
                                        maxLength="1"
                                        onChange={(e) => handleInputChange(e, index)}
                                        ref={(el) => (inputRefs.current[index] = el)}
                                    />
                                </li>
                            ))}
                        </ul>
                    </div>
                    <div className="lxybp">
                        <p><span style={{color:'#8f30d2'}}>{num}秒</span>后重新发送</p>
                    </div>
                    <div className="lxyb">
                        <button className="lxa" onClick={verifyCode}>验证</button>
                    </div>
                </div>
            )}
        </div>
    )
}
export default Lchangemi